import React from 'react';
import { is_empty, obj_str } from 'sui';
import { split_psn } from 'client/pick/cmd';

const StepView = ({ umd }) => {
    const getVal = (d) => {
        let dia = obj_str(d, "dia");
        let dt = obj_str(d, "dt");
        let width = obj_str(d, "width");

        return [dia, dt, width];
    };

    const getMsn = () => {
        const info = umd.info;
        if (is_empty(info)) {
            return null;
        }

        return info.map(d => {
            const sn = obj_str(d, "sn");
            const pos = obj_str(d, "pos");

            const [dia, dt, width] = getVal(d);

            return (
                <div key={sn} className="flex flex-col bg-blue-500 m-2">
                    <div className="text-base w-40 text-center">{split_psn(sn)}</div>
                    <div className="text-base w-40 text-center">{pos}</div>
                    <div className="text-base w-40 text-center text-white">直径<span className="ml-2">{dia}</span></div>
                    <div className="text-base w-40 text-center text-white">沟径<span className="ml-2">{dt}</span></div>
                    <div className="text-base w-40 text-center text-white">宽度<span className="ml-2">{width}</span></div>
                </div>
            );
        });
    };

    return (
        <div className="flex h-full overflow-y-auto">
            <div className="flex flex-wrap content-start">
                {getMsn()}
            </div>
        </div>
    );
};

export {StepView};
